<template>
	<view class="virtual-list" style="position: relative;">
		<!-- <movable-area style="position: absolute;right: 0;width: 30px;height: 100%;">
			<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
				<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
				<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
			</movable-view>
		</movable-area> -->
		<scroll-view scroll-y="true" :style="{
						 'height': scrollHeight + 'px',
						 'position': 'relative',
						 'zIndex': 1
					 }" @scroll="handleScroll" :scroll-top="scrollTop" :show-scrollbar="false">
					
			<view class="scroll-bar" :style="{ 
					'height': localHeight + 'px'
				  }"></view>
			<view class="list" :style="{
					  'transform': `translateY(${offset}px)`
				  }">
				  <!-- <text>{{bookInfo.name}}</text>	 -->
				  
				  <view class="contents--head">
					  <image class="contents--img" :src="bookInfo.img"  @click="jump"></image>
					  <view class="contents--desc">
					  						  <view class="contents--book">
					  							  <view class="contents--book_name" style="color: rgba(0, 0, 0, 0.9)"  @click="jump">
					  								  {{bookInfo.name}}
					  							  </view>
					  							  <image class="contents--right_arrow" src="../static/icon/right.png"></image>
					  						  </view>
					  						  <view class="contents--author" style="color: rgba(0, 0, 0, 0.55)" @click="jump">{{bookInfo.author}}</view>
					  						  <view class="contents--chapter_ext">
					  							  <view class="contents--chapter_num" @click="jump">共{{chapter}}章</view>
					  							  <view class="contents--contents_opr contents--top flex" v-if="top" @click="gowhere(1)">
					  								  <image class="contents--top_icon" src="../static/icon/to-top.png"></image>
					  								  <view> 去顶部</view>
					  							  </view>
												  <view class="contents--contents_opr contents--top flex" v-else  @click="gowhere(2)">
													  <image class="contents--top_icon" src="../static/icon/bottom.png"></image>
													  <view> 去底部</view>
												  </view>
					  						  </view>
					  </view>
				  </view>
				
				<view style="color: rgba(0, 0, 0, 0.3)" class="item-wrap" v-for="(item, index) in visibleData" :key="index">
					<slot :item="item" :active="active" ></slot>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'VirtualList',
		props: {
			// 所有的items
			items: Array,
			// 可视区域的item数量
			remain: Number,
			// item大小
			size: Number,
			// 当前章节
			active: Number,
			// 可使区域高度
			scrollHeight: Number,
			bookInfo:Object,
			chapter:Number
		},
		data() {
			return {
				// 起始
				start: 0,
				top:false,
				// 结束
				end: this.remain,
				// list 偏移量
				offset: 0,
				scrollTop: 0,
				y: 0
			}
		},
		created() {
			//当前章节滚动至顶部
			this.scrollTop = this.size * this.active
		},
		computed: {
			// 预留项
			options() {
				multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
			},
			preCount() {
				return Math.min(this.start, this.remain);
			},
			nextCount() {
				return Math.min(this.items.length - this.end, this.remain);
			},
			// 可视区域的item
			visibleData() {
				const start = this.start - this.preCount;
				const end = this.end + this.nextCount;
				return this.items.slice(start, end);
			},
			localHeight() {
				return this.items.length * this.size
			}
		},
		methods: {
			change(e) {
				if (e.detail.source !== 'touch') {
					return
				}
				let y = e.detail.y;
				let scroll = y / (this.scrollHeight - 40) * (this.localHeight - this.scrollHeight);
				scroll = scroll < 0 ? 0 : scroll;
				this.scrollTop = scroll;
			},
			handleScroll(ev) {
				
				const scrollTop = ev.detail.scrollTop;
				this.y = scrollTop / (this.localHeight - this.scrollHeight) * (this.scrollHeight - 40)
				// 开始位置
				const start = Math.floor(scrollTop / this.size)
				this.start = start < 0 ? 0 : start;
				// 结束位置
				this.end = this.start + this.remain;
				// 计算偏移
				const offset = scrollTop - (scrollTop % this.size) - this.preCount * this.size
				this.offset = offset < 0 ? 0 : offset;
			},
			jump(){
				
				    uni.navigateTo({
				      url: `/pages/bookshelf/detail?chapter=`+this.chapter+'&author='+this.bookInfo.author+"&bookname="+this.bookInfo.name
					  +"&sort="+this.bookInfo.sort+"&introduce="+this.bookInfo.introduce+"&img="+this.bookInfo.img+"&id="+this.bookInfo.id
				    });
			},
			gowhere(type){
				
				if(type==1){
					this.scrollTop = 0
				}else{
					this.scrollTop = this.localHeight
				}
				this.top = !this.top
			}
			
		}
	}
</script>

<style scoped>
	.list {
		position: absolute;
		/* top: 0; */
		top: 23%;	
		left: 0;
		width: 100%;
	}

	.action-bar-box {
		padding: 3px;
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		right: 0;
		background-color: transparent;
		border-radius: 10rpx;
		box-shadow: 0 0 5px #000;
		width: 20px;
		height: 40px;
		z-index: 2;
	}
	.contents--head {
	    /* margin-top: 24px; */
	    margin-bottom: 10px;
	    width: 100vw;
	    padding: 0 20px;
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: row;
	}
	.contents--img {
	    width: 100rpx;
	    height: 150rpx;
	}
	.contents--desc {
	    margin-left: 12px;
	    flex: 1;
	}
	.contents--book {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    font-size: 15px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	    color: #000000;
	}
	.contents--book_name {
	    font-size: 17px;
	    line-height: 24px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	    color: #000000;
	    margin-right: 4px;
	    flex-shrink: 1;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	}
	.contents--right_arrow {
	    flex-shrink: 0;
	    width: 16px;
	    height: 16px;
	    opacity: 0.55;
	}
	.contents--author {
	    font-size: 15px;
	    line-height: 20px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	    color: rgba(0,0,0,0.55);
	}
	.contents--chapter_ext {
	    display: flex;
	    align-items: center;
	    margin-top: 10px;
	    font-size: 12px;
	    line-height: 17px;
	    font-family: PingFang SC;
	    font-weight: 400;
	    color: rgba(0,0,0,0.3);
	}
	.contents--chapter_num {
	    flex: 1;
	}
	.contents--top_icon {
	    width: 16px;
	    height: 16px;
	}
	
</style>
